<template>
  <div class="budget_bar">
    <div class="title">
      <div class="left">{{ new Date().getMonth() + 1 }}月预算</div>
      <div class="right">{{(Number(pay ? pay : 0)).toFixed(2)}} / {{budget.toFixed(2)}}</div>
    </div>
    <div class="bar">
      <div class="white">
        <div class="color" :style="{width: `${(1 - pay/budget)*100}%`}"></div>
      </div>
    </div>
    <div class="money">
      <div class="left">剩余：{{ (budget - pay).toFixed(2) }}</div>
      <div class="right">剩余日均：{{ moreBudget.toFixed(2) }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { getMonthCount } from '@/utils/helper'
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  props: {
    budget: {
      type: Number,
      required: true
    },
  },
  setup(props) {
    const store = useStore()
    const pay = computed(() => store.state.billTotal.pay)
    const moreBudget = computed(() => {
      const date = new Date()
      const month = date.getMonth()
      const year = date.getFullYear()
      const day = date.getDate()
      const count = getMonthCount(month + 1, year)
      const money = (props.budget - pay.value)/(count - day)
      return month > 0 ? money : 0
    })
    return {
      moreBudget,
      pay
    }
  }
})
</script>

<style scoped>
  .budget_bar {
    border-radius: 12px;
    background-color: #f9c3c233;
    padding: 10px 14px;
  }
  .title, .money {
    display: flex;
    justify-content: space-between;
  }
  .title .left {
    font-weight: 600;
  }
  .bar {
    margin: 10px 0;
  }
  .color {
    /* width: 30%; */
    background-color: #F9C3C2;
    height: 4px;
    border-radius: 8px;
    position: absolute;
  }
  .white {
    background-color: #f9c3c233;
    height: 4px;
    border-radius: 8px;
    position: relative;
  }
</style>